<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<script>
    $(function () {

        // 生成ztree，页面展示
        generateTree();

        // 给添加按钮绑定单击事件
        $("#treeDemo").on("click", ".addBtn", function () {

            window.pid = this.id;
            // 弹出模态框
            $("#menuAddModal").modal("show");
            return false;
        });

        // 给模态框的保存按钮绑定单击事件
        $("#menuSaveBtn").click(function () {

            // 获取模态框中的内容
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());
            var icon = $("#menuAddModal [name=icon]:checked").val()

            // 发出请求，将数据封装到menu对象中传递给后端
            $.ajax({
                "url": "menu/save.json",
                "type": "post",
                "dataType": "json",
                "contentType": "application/json;charset=UTF-8",
                "data": {
                    "pid": window.pid,
                    "name": name,
                    "icon": icon,
                    "url": url
                },
                "success": function (response) {

                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("添加成功");
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("添加失败" + response.message);
                    }

                },
                "error": function (response) {
                    layer.msg(response.status + response.message);
                }
            });

            $("#menuAddModal").modal("hide");

            // 利用充值按钮的单击事件，将模态框的内容清空
            $("#menuResetBtn").click();

        });

        // 给编辑按钮绑定单击事件
        $("#treeDemo").on("click", ".editBtn", function () {


            $("#menuEditModal").modal("show");

            window.id = this.id;
            // 利用ztree中的方法，获取当前的节点对象，模态框数据回显
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            var key = "id";
            var value = window.id;
            var zNode = zTreeObj.getNodeByParam(key, value);

            $("#menuEditModal [name=name]").val(zNode.name);
            $("#menuEditModal [name=url]").val(zNode.url);
            $("#menuEditModal [name=icon]").val([zNode.icon]);

            return false;
        });

        // 给模态框更新按钮绑定单击事件
        $("#menuEditBtn").click(function () {

            // 发送请求
            $.ajax({
                "url": "menu/update.json",
                "type": "post",
                "dataType": "json",
                "data": {
                    "id": window.id,
                    "name": $("#menuEditModal [name=name]").val(),
                    "url": $("#menuEditModal [name=url]").val(),
                    "icon": $("#menuEditModal [name=icon]:checked").val()
                },
                "success": function (response) {

                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("修改成功");
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("修改失败" + response.message);
                    }

                },
                "error": function (response) {
                    layer.msg(response.status + response.message);
                }
            });

            $("#menuEditModal").modal("hide");
        });

        // 给删除按钮绑定单击事件
        $("#treeDemo").on("click", ".removeBtn", function () {

            $("#menuConfirmModal").modal("show");
            window.id = this.id;

            // 获取节点对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            var key = "id";
            var value = window.id;
            var zNode = zTreeObj.getNodeByParam(key, value);

            var removeName = zNode.name;
            var removeIcon = zNode.icon;

            // 模态框中显示提示信息
            $("#removeNodeSpan").html("【<i class='" + removeIcon + "'>" + removeName + "</i>】");

            return false;
        });

        // 给模态框OK按钮绑定单击事件
        $("#confirmBtn").click(function () {

            $.ajax({
                "url": "menu/remove.json",
                "type": "post",
                "dataType": "json",
                "data": {
                    "id": window.id
                },
                "success": function (response) {

                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("删除成功");
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("删除失败" + response.message);
                    }

                },
                "error": function (response) {
                    layer.msg(response.status + response.message);
                }
            });

            $("#menuConfirmModal").modal("hide");

        });

    });
</script>
<body>

<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/modal-menu-add.jsp" %>
<%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
<%@include file="/WEB-INF/modal-menu-edit.jsp" %>
</body>
</html>